<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" >
            <span>个人信息</span>
          </div>

          <div>
            <div class="text-body">
              <ul class="text" >
                <li>
                  <div class="text-center" >
                    <el-upload
                      action="http://localhost:8080/sysUser/upload"
                      :headers="token"
                      :show-file-list=imgflag
                      :on-success="handleAvatarSuccess"
                    >
                      <img :src=user.avatar class="image" >
                    </el-upload>
                  </div>
                </li>
                <li >
                  <svg-icon icon-class="user"  /> 用户名称<div class="pull-right"> {{user.userName}}</div>
                </li>

                <li>
                  <svg-icon icon-class="phone"  /> 手机号码<div class="pull-right"> {{user.phonenumber}}</div>
                </li>
                <li>
                  <svg-icon icon-class="email"  /> 用户邮箱<div class="pull-right"> {{user.email}}</div>
                </li>
                <li>
                  <svg-icon icon-class="tree"  /> 所属部门<div class="pull-right"> {{user.deptName}}/{{user.postName}}</div>
                </li>
                <li>
                  <svg-icon icon-class="peoples"  /> 所属角色<div class="pull-right"> {{user.roleName}}</div>
                </li>
                <li>
                  <svg-icon icon-class="date"  /> 创建日期<div class="pull-right"> {{user.createTime}}</div>
                </li>
              </ul>
            </div>

          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>

          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本资料" name="infomations">
              <el-form :model="info"  ref="info" label-width="100px" class="demo-ruleForm" :rules="rules">
                  <el-form-item label="用户昵称" prop="nickName" >
                    <el-input v-model="info.nickName"></el-input>
                  </el-form-item>
                <el-form-item label="手机号码" prop="phonenumber"  >
                  <el-input v-model="info.phonenumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" >
                  <el-input v-model="info.email"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <template>
                    <el-radio v-model="radio" label="1">男</el-radio>
                    <el-radio v-model="radio" label="0">女</el-radio>
                  </template>
                </el-form-item>
                <div style="margin-left: 85px" >
                  <el-button type="success" size="mini" @click="submit('info')">保存</el-button>
                  <el-button type="danger" size="mini" @click="clear">重置 </el-button>
                </div>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="修改密码" name="updatePwd">
              <el-form :model="ruleForm"   label-width="100px" class="demo-ruleForm" ref="ruleForm" :rules="rules">
                <el-form-item label="旧密码"   prop="oldPass" >
                  <el-input type="password" v-model="ruleForm.oldPass" ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass"  >
                  <el-input type="password"  v-model="ruleForm.pass" ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" >
                  <el-input type="password" v-model="ruleForm.checkPass" ></el-input>
                </el-form-item>
                <div style="margin-left: 85px" >
                  <el-button type="success" size="mini" @click="submit('ruleForm')">保存</el-button>
                  <el-button type="danger" size="mini" @click="resetForm('ruleForm')">重置 </el-button>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from "../../store";
import { getToken } from '@/utils/auth';
export default {
  name: 'index',
    data(){

      const validateOldPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'));
        } else {
          //检查旧密码是否正确
          this.info.userId = this.user.userId;
          this.info.password = this.ruleForm.oldPass;
          this.axios.post("http://localhost:8080/sysUser/password",
            this.info
          ).then(result => {

            if (result.data.data === "error") {
              callback(new Error('旧密码错误'));
            } else {
              callback();
            }
          })
        }
      };

      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      const validatePhone = (rule, value, callback) => {
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        const reg = '*';
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if (!regMobile.test(value) && reg !== (value.slice(4, 5))) {
          callback(new Error('手机号码不正确!'));
        } else {
          callback();
        }
      };
      return{
          imgflag : false,
          token:{"Authorization" : getToken()},
          /*自定义规则数据*/
          ruleForm: {
              oldPass:'',
              pass: '',
              checkPass: '',
              phonenumber:'',
          },
          user:{},
          /*默认选择基本资料*/
          activeName: 'infomations',
          /*绑定基本资料页面*/
          info:{
              nickName:"",
              phonenumber:"",
              email:"",
              sex:"",
              userId:"",
              password:""
           },
          /*单选框性别绑定*/
          radio:"",
          /*验证旧密码是否正确*/
          flag:"1",
          /*elementui自带验证规则*/
          rules:{
              nickName:[
                  { required: true, message: '请输入用户昵称', trigger: 'blur' },
                  { min: 1, max: 5, message: '长度在1到 5 个字符', trigger: 'blur' }
              ],
              phonenumber: [
                  { required: true,validator: validatePhone, trigger: 'change' },
                  {min: 11, max: 11, message: '手机号长度不正确！', trigger: ['blur', 'change']}
              ],
              email:[
                  { required: true, message: '请输入邮箱', trigger: 'change' },
                  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ],
              oldPass: [
                  { required: true, validator: validateOldPass, trigger:  'blur' }
              ],
              pass: [
                  {  required: true,validator: validatePass, trigger: 'change' },
                  { min: 4, max: 10, message: '长度在4到 10 个字符', trigger: ['blur', 'change'] }
              ],
              checkPass: [
                  { required: true, validator: validatePass2, trigger: ['blur', 'change'] }
              ],

          },


      }
    },
    methods:{
      /*更新头像*/
        handleAvatarSuccess(res, file){
            this.user.avatar=res;
            this.axios.put("/sysUser/avatar",
                this.user
            ).then(result => {
                if(result.data.data == 'ok'){
                    this.loadUserInfo();
                }

            })

        },

        handleClick(){

        },

        /*保存基本资料按钮*/
        submit(formName){
            this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.info.sex = this.radio;
                        this.info.userId = this.user.userId;
                        if(this.info.password === ''){
                            this.info.password = this.user.password
                        }else{
                            this.info.password = this.ruleForm.checkPass
                        }
                        this.axios.put("/sysUser/user",
                            this.info
                        ).then(result => {
                            this.$message({
                                message: '更新成功',
                                type: 'success',
                                duration:2000 , //显示时间, 毫秒。
                            });
                            this.loadUserInfo();
                            this.resetForm('ruleForm');

                    })
                  }
            })
        },

        /*重置密码及验证规则按钮*/
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        clear(){
            /*this.$router.push('/')*/
            this.info={
                name:"",
                number:"",
                email:"",
            }
        },
        /*加载个人信息*/
        loadUserInfo() {
            /*获取当前用户名*/
            let userName = store.getters.name;
            this.axios.get("/sysUser/info/"+userName)
                .then(result => {
                    this.user = result.data.data;
                    this.info.nickName = this.user.nickName;
                    this.info.phonenumber = this.user.phonenumber;
                    this.info.email = this.user.email;
                    this.radio = this.user.sex;

                })
        },

    },
    created() {
      this.loadUserInfo();
    }

}
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }

  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 50%;
  }


  .clearix {
    display: table;
    content: "";
  }

  .text-center{
    margin-left: calc(50% - 75px)
  }
  /*去掉ul前面的小点*/
  ul{
    list-style: none;

    margin-left: -30px;
  }
  .pull-right{
    display: inline;
   float: right;
  }
  li {
    margin-bottom: 15px;
    border-bottom: 1px solid gainsboro;
    padding-bottom: 15px;

  }


</style>
